<template>
  <view class="container">
    <view class="remindBox">

      <tui-tab :tabs="tabs" :current="tabCurrent" @change="change" height="98" backgroundColor="#fff" size="34"
        color="rgba(0, 0, 0, .3)" selectedColor="rgba(61, 61, 61, 1)" bold sliderHeight="8rpx"
        sliderBgColor="rgba(252, 210, 56, 1.00)" sliderRadius="8rpx">
      </tui-tab>

      <view v-if="remindShow" class="remindBox_content">
        <block v-for="(item,i) in remindList" :key="i">
          <remindItem :remindItem="item" v-on:delete="refresh"></remindItem>
        </block>
      </view>

      <view v-if="!remindShow" class="remindBox_content">
        <block v-for="(item,i) in pastList" :key="i">
          <remindPast :pastItem="item" v-on:delete="refresh"></remindPast>
        </block>
      </view>

      <tui-fab v-if="suspensionShow" :left="0" :right="80" :bottom="160" :width="126" :height="126"
        bgColor="rgba(252, 210, 56, 1.00)" @click="onClicksuspension">
      </tui-fab>

      <!-- 提醒弹框 -->
      <van-popup :show="everydayShow" round position="bottom" custom-style="height: 80%" @close="oneverydayClose">
        <view class="everyday">
          <view class="everyday_box">

            <view class="everyday_box_Item" v-for="(item,i) in labelList" :key="i"
              @click="navTo('/subpkg/addremind/addremind?name=' + item.tagName +'&id=' + item.id)">
              <image :src="item.previewImage" mode="aspectFill"></image>
              <text>{{item.tagName}}</text>
            </view>
          </view>
          <view class="everyday_no" @click="oneverydayClose">
            <image src="/static/everyday/no.png" mode="aspectFill"></image>
          </view>
        </view>
      </van-popup>

      <view class="blankBox" v-if="remindList.length == 0 && remindList">
        <image src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/2ebf57e8968f91945a73f56a725f8fb3.png" mode="aspectFill"></image>
        <text>你还没有创建提醒计划，快去创建吧！</text>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'

  import {
    getLabel,
    getEstablish
  } from '@/api/remind.js'

  import remindItem from '@/components/remind_Item/remind_Item.vue'
  import remindPast from '@/components/remind_past/remind_past.vue'

  export default {
    data() {
      return {
        addmubmit: false,

        tabs: ['待提醒', '已过期'],
        current: 1,
        total: 0,

        active: 0,
        tabCurrent: 0,
        // 选中索引
        currTab: 0,

        // tab页
        remindShow: true,
        // 提醒  true  去完成      false 多少天后
        recordShow: true,
        // 过期
        pastShow: true,

        // 标签
        labelList: [],
        // 提醒列表
        remindList: [],
        // 提醒弹出框
        everydayShow: false,
        suspensionShow: true,
        // 过期列表
        pastList: [],
        groundingShow: false,
      };

    },
    components: {
      remindItem,
      remindPast
    },
    computed: {
      ...mapGetters('m_user', ['isLogin'])
    },
    watch: {
      // isLogin: {
      //   handler: function(newV, oldV) {
      //     this.getremindList()
      //   },
      //   deep: true
      // }
    },
    onShow() {
      // this.current = 1
      // 获取标签
      getLabel(-1).then(res => {
        this.labelList = res.data
      })

      this.getremindList()
    },
    onReachBottom() {
      this.groundingShow = true

      if (this.current * 10 > this.total) return

      this.current++
      if (this.currTab == 0) {
        this.remindShow = true
        this.getremindList()
      } else if (this.currTab == 1) {
        this.remindShow = false
        this.getpastList()
      }
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
        this.current = 1
        this.groundingShow = false
        this.everydayShow = false
        this.suspensionShow = true
      },
      // 提醒
      getremindList() {
        // console.log(this.addmubmit)
        // this.recordShow = true
        var getEstablishQuery = {
          current: this.current,
          size: 10,
          status: 1
        }
        getEstablish(getEstablishQuery).then(res => {
          if (this.groundingShow) {
            this.remindList = [...this.remindList, ...res.data.records]
            // console.log(this.remindList)
          } else {
            this.remindList = res.data.records
            // console.log(this.remindList)
          }
          // console.log(this.remindList)
          this.total = res.data.total
        })
      },
      // 过期
      getpastList() {
        var getEstablishQuery = {
          current: this.current,
          size: 10,
          status: 2
        }
        getEstablish(getEstablishQuery).then(res => {
          if (this.groundingShow) {
            this.pastList = [...this.pastList, ...res.data.records]
          } else {
            this.pastList = res.data.records
          }
          this.total = res.data.total
        })
      },
      onClicksuspension() {
        this.suspensionShow = false
        this.everydayShow = true
      },
      oneverydayClose() {
        this.suspensionShow = true
        this.everydayShow = false
      },
      change(e) {
        this.current = 1
        this.currTab = e.detail.__args__[0].index
        if (this.currTab == 0) {
          this.remindList = [] 
          // pastList
          this.remindShow = true
          this.getremindList()
        } else if (this.currTab == 1) {
          this.pastList = []
          // remindList
          this.remindShow = false
          this.getpastList()
        }
      },
      refresh(e) {
        if (e) {
          this.current = 1
          this.groundingShow = false
          this.getremindList()
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: rgba(245, 245, 245, 1);
  }

  /deep/.tui-tabs__item {
    width: 50%;

  }


  .remindBox {

    /deep/.van-tab {
      color: rgba(61, 61, 61, .5);
    }

    /deep/.van-tabs__line {
      width: 50rpx !important;
      left: 70rpx !important;
      // transform: translateX(160rpx) !important;
      background-color: rgba(253, 211, 56, 1);
    }

    /deep/.van-tab--active {

      font-weight: 600;
      color: rgba(61, 61, 61, 1);
    }

    .remindBox_content {
      padding: 0 30rpx;
      padding-top: 30rpx;
    }
  }

  .everyday {
    position: relative;
    width: 100%;
    height: 100%;

    .everyday_box {
      padding: 0 40rpx;
      padding-top: 50rpx;
      height: 80%;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;

      .everyday_box_Item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 98rpx;
          height: 98rpx;
        }

        text {
          font-size: 24rpx;
          margin-top: 20rpx;
        }
      }
    }

    .everyday_no {
      position: absolute;
      left: 50%;
      bottom: 50rpx;
      transform: translateX(-50%);
      width: 58rpx;
      height: 58rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

  }

  .blankBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 184rpx;
      height: 321rpx;
      margin-bottom: 20rpx;
    }

    text {
      font-size: 30rpx;
      color: rgba(61, 61, 61, .5);
    }
  }
</style>
